<template>
	<view style="padding-bottom:100rpx;">
		<nav-bar
		:leftSet="leftSet"
		:rightSet="rightSet"
		:middleSet="middleSet"
		background-color="#6899F7"
		status-bar="false"
		fixed="false"
		rightClick="+"
		@clickLeft="back"
		@clickRight="metu"/>
		<custom-content>
			<view class="">
				<!-- 轮播 -->
				<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular=true>
					<swiper-item v-for="(item,index) in imgList" :key="index"
						style="height:1000rpx;">
						<image :src="item" mode="" class="img_"></image>
					</swiper-item>
				</swiper>
				<notice-bar
					text="欢迎小智成为会员"
					backgroundColor="#ffffff"
					color="#b5b5b5"
					:speed="speed"
					scrollable=true
					showIcon=true
					bigBoxHeight="44px"
				/>
				<module :list="txt1.moduleList" :topTitle="txt1.topTitle" :numClass="txt1.numClass" :itemClass1 ="txt1.itemClass1" :itemClass2="txt1.itemClass2"v-slot="{user}">
					<image :src="user.image" mode="" class="top-list"></image>
					<text style="margin-top: 10rpx;">{{user.title}}</text>	
				</module>
				
				<view class="" style="margin-top: 40rpx;">
					<module :list="txt2.moduleList" :widths="txt2.widths" :borderRadius="txt2.borderRadius"  :topTitle="txt2.topTitle" :numClass="txt2.numClass" :itemClass1 ="txt2.itemClass1" :itemClass2="txt2.itemClass2" v-slot="{user}">
						<view class="box_"></view>
					</module>
				</view>	
			</view>
			<view class="w_100" style="margin-top: 100rpx;">
				<view class="w_100 j_c_c d_f">
					—— 最新资讯 ——
				</view>
				<view class="" style="margin-top: 40rpx;">
					<module :list="txt3.moduleList" :numClass="txt3.numClass" :widths="txt3.widths" :borderRadius="txt3.borderRadius"  :itemClass1 ="txt3.itemClass1" :itemClass2="txt3.itemClass2" v-slot="{user}">
						<view class="newBox d_f j_c_c" >
							<view class="w_91">
								<text v-for="(item,index) in 10" class="d_b tex ">热门{{index+1}}</text>
							</view>	
						</view>
					</module>
				</view>
				<view v-for="(item,index) in 2" :key="index">
					<view class="w_100 d_f j_c_c" style="margin-top: 20rpx;">
						<video src="../../static/video/v1.mp4" controls autoplay loop
						 object-fit="cover"
						 poster="../../static/video/vImg.jpg"
						 enable-play-gesture style="height: 300rpx;">
						 </video>
					</view>
				</view>	
			</view>
			<view class="w_100" style="margin-top: 100rpx;">
				
				<module :list="txt3.moduleList" :numClass="txt3.numClass" :widths="txt3.widths" :borderRadius="txt3.borderRadius"  :itemClass1 ="txt3.itemClass1" :itemClass2="txt3.itemClass2" v-slot="{user}">
					<view class="w_100">
						<text>新人见面礼</text>
						<view class="w_100 d_f j_c_s_b">
							<view class="meet" style="background-color: #c29116;">
								
							</view>
							<view class="meet d_f f_w_w a_c_s_b">
								<view class="" style="width: 100%;height: 140rpx;background-color: #b9796c;">
									
								</view>
								<view class="" style="width: 100%;height: 140rpx;background-color: #b9796c;">
									
								</view>
							</view>
						</view>
						
					</view>
				</module>
					
			</view>
		</custom-content>	
	</view>
</template>

<script>
	import NoticeBar from '../../components/uni-notice-bar/uni-notice-bar.vue'
	import module from './module.vue'
	export default {	
		data() {
			return {
				leftSet:{
					// leftText:"",
					// leftIcon:"back",
					leftColor:"#81d514",
					leftFontSize:"28rpx"
				},
				rightSet:{
					// rightText:"我是",
					rightIcon:"",
					rightColor:"#540a03",
					rightFontSize:"28rpx",
				},
				middleSet:{
					title: "首页",
					middleColor:"#140200",
					middleFontSize: "28rpx",
				},
				speed:20,
				imgList:['../../static/image/banner.png','../../static/image/bg.png','../../static/image/p2.png'],
				
				txt1:{
					moduleList:[
						{'image':"../../static/image/tabar/homeOne.png","title":"功能"},
						{'image':"../../static/image/tabar/statisticalOne.png","title":"功能"},
						{'image':"../../static/image/tabar/patientsOne.png","title":"功能"},
						{'image':"../../static/image/tabar/statisticalOne.png","title":"功能"},
						{'image':"../../static/image/tabar/personalOne.png","title":"功能"},
						{'image':"../../static/image/tabar/statisticalOne.png","title":"功能"},
						{'image':"../../static/image/tabar/statisticalOne.png","title":"更多"},
					],
					topTitle:"热门",
					numClass:3,
					itemClass1:{
						'width':' 25%',
						'margin-top':'20rpx',
						
					},
					itemClass2:{
						'width':' 25%',
					}
				},
				txt2:{
					moduleList:4,
					topTitle:"租户功能",
					numClass:1,
					widths:88,
					borderRadius:20,
					itemClass1:{
						'width':' 50%',
						'margin-top':'30rpx',
						
					},
					itemClass2:{
						'width':' 50%',
					}
				},
				txt3:{
					moduleList:1,
					numClass:0,
					widths:88,
					borderRadius:20,
					itemClass1:{
						'width':'100%',
						'margin-top':'30rpx',
						
					},
					itemClass2:{
						'width':' 100%',
					}
				}
				
			}
		},
		components: {
			NoticeBar,
			module
		},
		methods: {
			back(){
				this.$funs.show("left",0)
			},
			metu(){
				this.$funs.show("right",0)
			},
			
		},
		
	}
</script>

<style >
	page{
		background-color: #f8f8f8;
	}
.top-list{
	width: 80rpx;
	height: 80rpx;
	border-radius:10rpx;
}
.box_{
	width:84%;
	height: 160rpx;
	border-radius: 20rpx;
	border: 1rpx solid #24CCB3;
}
.newBox{
	width:100%;
	height: 400rpx;
	border-radius: 20rpx;
	background:linear-gradient(to bottom,#006ea1,#0094d9);
	overflow: auto;
	color: #fefefe;
}
.img_{
	width: 100%;
	
}
.tex{
	width: 100%;
	height:100rpx;
	line-height: 100rpx;
}
.meet{
	margin-top: 20rpx;
	width:48%;
	height: 300rpx;
	
}

</style>
